<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>与木共舞板材网</title>
    <link rel="stylesheet" href="../../css/weui.css">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/vue.js"></script>
</head>

<body>
    <section class="order-wrap">
        <header class="order-header">
            <i class="weui-icon-success"></i>
            <span>订单提交成功</span>
        </header>
        <section class="order-section">
            <div class="order-message">
                <h3>订单信息</h3>
                <dl>
                    <dt>订单号</dt>
                    <dd>5126959994023</dd>
                </dl>
                <dl>
                    <dt>订单金额</dt>
                    <dd>￥365</dd>
                </dl>
            </div>
            <p>
                注：板材网商城及销售商不会以订单异常、系统升级为由，要求您点击任何链接进行退款
            </p>
        </section>
        <footer class="order-footer">
            <a href="#" class="order-btn">返回首页</a>
            <a href="#" class="order-btns">立即支付</a>
        </footer>
    </section>
    <aside>
        <div class="weui-mask" id="mask"></div>
        <div class="weui-actionsheet" id="dialog">
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__title">
                    <p class="weui-actionsheet__title-text">选择支付方式</p>
                </div>
                <div class="weui-actionsheet__cell">
                    <a href="" class="order-link">示例菜单
                    </a>
                </div>
                <div class="weui-actionsheet__cell">
                    <a href="" class="order-link">示例菜单
                    </a>
                </div>
                <div class="weui-actionsheet__cell">
                    <a href="" class="order-link">示例菜单
                    </a>
                </div>
                <div class="weui-actionsheet__cell">
                    <a href="" class="order-link">示例菜单
                    </a>
                </div>
            </div>
            <div class="weui-actionsheet__action">
                <div class="weui-actionsheet__cell" id="quit">取消</div>
            </div>
        </div>
    </aside>
    <aside>
        <script>
            class Order {
                constructor() {
                    this.btns = $('.order-btns')
                    this.mask = $('#mask');
                    this.dialog = $('#dialog');
                    this.quit = $('#quit');
                    this.mask.hide()
                    this.onload()
                }
                onload() {
                    //点击立即支付
                    this.btns.bind('touchstart', () => {
                        this.showDialog()
                    })
                    //点击取消
                    this.quit.bind('touchstart', () => {
                        this.hideDialog()
                    })
                    //点击遮罩隐藏
                    this.mask.bind('touchstart', () => {
                        this.hideDialog()
                    })
                }
                showDialog() {
                    this.dialog.addClass('weui-actionsheet_toggle')
                    this.mask.fadeIn(200)
                }
                hideDialog() {
                    this.mask.fadeOut(200)
                    this.dialog.removeClass('weui-actionsheet_toggle')
                }


            }
            const order = new Order()
        </script>
    </aside>
</body>

</html>